﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Role.aspx.cs" Inherits="Website.Sys.Role" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="/assets/css/jquery-ui.min.css" />
    <link rel="stylesheet" href="/assets/css/bootstrap-datepicker3.min.css" />
    <link rel="stylesheet" href="/assets/css/ui.jqgrid.min.css" />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="page-header">
        <h1>角色权限
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                列表
            </small>
        </h1>
    </div>
    <!-- /.page-header -->

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <!--<div class="alert alert-info">
                <button class="close" data-dismiss="alert">
                    <i class="ace-icon fa fa-times"></i>
                </button>

                <i class="ace-icon fa fa-hand-o-right"></i>
                Please note that demo server is not configured to save the changes, therefore you may see an error message.
            </div>-->

            <table id="grid-table"></table>
            <div id="grid-pager"></div>

            <!-- PAGE CONTENT ENDS -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
    <!-- page specific plugin scripts -->
    <script src="/assets/js/jquery.jqGrid.min.js"></script>
    <script src="/assets/js/grid.locale-cn.js"></script>

    <!-- inline scripts related to this page -->
    <script type="text/javascript">

        function isJsonObj(obj) {
            var isjson = typeof (obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
            return isjson;
        }

        /***************************
        //
        // 显示错误信息
        //
        ****************************/
        function showErr(err, title) {
            if (title != null && title.trim().length == 0) title = "错误：";
            bootbox.alert({
                size: "small",
                backdrop: true,
                title: title,
                message: err,
                buttons:
                {
                    "ok":
                    {
                        "label": "<i class='ace-icon fa fa-exclamation-circle'></i>确 定",
                        "className": "btn-sm btn-danger",
                        "callback": function () {
                            //Example.show("uh oh, look out!");
                        }
                    }
                }
            });
        }

        /***************************
        //
        // 显示提示信息
        //
        ****************************/
        function showInfo(info, title) {
            if (title != null && title.trim().length == 0) title = "提示：";
            bootbox.alert({
                size: "small",
                backdrop: true,
                title: title,
                message: info,
                buttons:
                {
                    "ok":
                    {
                        "label": "<i class='ace-icon fa fa-check'></i>确 定",
                        "className": "btn-sm btn-success",
                        "callback": function () {
                            //Example.show("uh oh, look out!");
                        }
                    }
                }
            });
        }


        function valid_Required(value) {
            if (value && typeof (value) == "string" && (value + "").length > 0) {
                return [true, ""];
            }
            else {
                return [false, "值不能空"];
            }
        }

        jQuery(function ($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";

            var parent_column = $(grid_selector).closest('[class*="col-"]');
            //resize to fit page size
            $(window).on('resize.jqGrid', function () {
                $(grid_selector).jqGrid('setGridWidth', parent_column.width());
            })

            //resize on sidebar collapse/expand
            $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
                if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                    //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                    setTimeout(function () {
                        $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                    }, 20);
                }
            })

            //if your grid is inside another element, for example a tab pane, you should use its parent's width:
            /**
            $(window).on('resize.jqGrid', function () {
                var parent_width = $(grid_selector).closest('.tab-pane').width();
                $(grid_selector).jqGrid( 'setGridWidth', parent_width );
            })
            //and also set width when tab pane becomes visible
            $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
              if($(e.target).attr('href') == '#mygrid') {
                var parent_width = $(grid_selector).closest('.tab-pane').width();
                $(grid_selector).jqGrid( 'setGridWidth', parent_width );
              }
            })
            */


            /******************************************************************************
            /*  cellvalue：要被格式化的值 
            /*  options：对数据进行格式化时的参数设置，格式为：{ rowId: rid, colModel: cm} 
            /*  rowObject：行数据
            /*****************************************************************************/
            function formatter_Name(cellvalue, options, rowObject) {
                return "$"+cellvalue;
            }
            function unformatter_Name(cellvalue, options) {
                return cellvalue.replace("$", "");
            }

            function formatter_IsSystem(cellvalue, options, rowObject) {
                return cellvalue == true ? "√" : "";
            }


            var lastSel; // 上一次选中的行id
            jQuery(grid_selector).jqGrid({

                caption: "角色权限", // 表格标题
                mtype: 'GET', // ajax提交方式。POST或者GET，默认GET
                //direction: "rtl",

                datatype: "json",
                url: '/action/Role.ashx?action=list',

                editurl: "/action/Role.ashx?action=edit",//nothing is saved

                height: '100%',
                //height: 300,
                colNames: [' ', 'Id', '角色名称', '创建时间',"系统角色", '说明'],
                // colModel: 常用的属性，name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序
                colModel: [
                    /// name: 表格列的名称，所有关键字，保留字都不能作为名称使用包括subgrid, cb and rn.
                    /// index: 和后台交互的参数为sidx
                    /// search: 在搜索模式下，定义此列是否可以作为搜索列
                    /// sortable: 是否可排序
                    /// stype: 定义搜索元素的类型
                    /// surl: 搜索数据时的url
                    /// width: 默认列的宽度，只能是象素值，不能是百分比
                    /// formatter: 格式化单元格值的方法
                    /// unformat: ‘unformat’单元格值的方法
                    /// editable: 是否可编辑。拥有'not-editable-row' 样式的行不可编辑，即使editable配置编辑。
                    {
                        name: 'func', index: '', width: 80, fixed: true, sortable: false, resize: false,
                        formatter: 'actions', //actions，固定值
                        formatoptions: {
                            keys: true,
                            //editbutton: false,//disable edit button
                            //delbutton: false,//disable delete button
                            editformbutton: true, // editformbutton设置为true 将调用表单编辑对话框，取代行编辑模式
                            editOptions: { recreateForm: false, beforeShowForm: beforeEditCallback, afterSubmit: afterEditCallback }, // 表单编辑模式下，recreateForm设置为false，仅调用一次dataInit(ele)方法，recreateForm设置为true则每次都会调用dataInit(ele)
                            delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback, afterSubmit: afterDeleteCallback },
                            onSuccess: function (response) {
                                var selrow = jQuery(grid_selector).jqGrid('getGridParam', 'selrow'); // 获取当前选中的行
                                if (response.readyState == 4 && response.status == 200) {
                                    if (response.responseJSON.ok) {
                                        showInfo("保存成功！" + response.responseJSON.message)
                                        jQuery(grid_selector).jqGrid('saveRow', selrow);
                                        return true;
                                    }
                                    else {
                                        //jQuery(grid_selector).restoreRow(selrow);
                                        //jQuery(grid_selector).jqGrid('restoreRow', selrow);
                                        showErr(response.responseJSON.message, "保存失败：");
                                        return false;
                                    }
                                }
                                else {
                                    showErr("连接服务器失败。status[" + response.status + "]，err[" + response.statusText + "]", "保存失败：");
                                    return false;
                                }
                            },
                            onError: function (rowid, xhr) {
                                // 请求失败事件
                                if (xhr.status != 200) {
                                    var err = "连接服务器失败！错误：" + xhr.status + " - " + xhr.statusText
                                    showErr(err);
                                }
                            },
                        }
                    },
                    { name: 'id', index: 'id', editable: true, hidden: true },
                    { name: 'name', index: 'name', width: 60, editable: true, editrules: { custom: true, custom_func: valid_Required }, summaryType: 'count', summaryTpl: '({0}) 汇总：', /*formatter: formatter_Name, unformat: unformatter_Name,*/ },
                    { name: 'timecreated', index: 'timecreated', width: 90, editable: true, formoptions: { /*elmprefix*/ elmsuffix: '&nbsp;(<span style="color:red;">*</span>)' }, search: false, unformat: pickDate, editrules: { required: true } },
                    { name: 'issystem', index: 'issystem', width: 25, editable: false, align: 'center', formatter: formatter_IsSystem },
                    { name: 'description', index: 'description', width: 150, editable: true, editoptions: { size: "20", maxlength: "30" }, summaryType: 'count', summaryTpl: '共 {0} 项' },
                    //{ name: 'stock', index: 'stock', width: 70, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No" }, unformat: aceSwitch },
                    //{ name: 'ship', index: 'ship', width: 90, editable: true, edittype: "select", editoptions: { value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX" } },
                    //{ name: 'note', index: 'note', width: 150, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10" } }
                ],


                //subgrid options
                subGrid: true,
                subGridOptions: {
                    plusicon: "ace-icon fa fa-plus center bigger-110 blue",
                    minusicon: "ace-icon fa fa-minus center bigger-110 blue",
                    openicon: "ace-icon fa fa-chevron-right center orange"
                },
                subGridRowExpanded: function (subgridDivId, rowId) {
                    var subgridTableId = subgridDivId + "_t";
                    $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
                    $("#" + subgridTableId).jqGrid({
                        caption: "所有权限",
                        datatype: "json",
                        url: '/action/Role.ashx?action=gettasks&roleid=' + rowId,
                        colNames: ['功能模块', '代码', '名称', '说明'],
                        colModel: [
                            { name: 'group', width: 150 },
                            { name: 'code', width: 120 },
                            { name: 'name', width: 150 },
                            { name: 'description', width: 250 }
                        ],
                        height: '100%',
                        cmTemplate: { sortable: false },
                        grouping: true,
                        groupingView: {
                            groupField: ['group'], // 分组列
                            groupColumnShow: [true], // 分组列显示
                            groupText: ['<b>{0}</b>'], // 分组表头
                            plusicon: 'fa fa-chevron-down bigger-110',
                            minusicon: 'fa fa-chevron-up bigger-110'
                        }
                    });
                },
                //--subgrid options END

                //cmTemplate: { sortable: false }, // 列模板，所有列都将执行此设置
                //autowidth: true, // true表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth
                
                //loadonce: true, // ture数据只从服务器端抓取一次，之后所有操作都是在客户端执行，翻页功能会被禁用
                //rowTotal: 2000, // 一次加载的总记录数
                rowList: [10, 20, 30],
                rowNum: 10, // 一页的记录数
                pager: pager_selector,
                gridview: false, // true将整个表格的数据都构造完成后再添加到grid中；false构造一行数据后添加到grid中
                //cellEdit: true, // true启用单元格编辑功能
                //cellurl: '', // 单元格提交的url
                cellsubmit: 'remote', // 定义了单元格内容保存位置
                autoencode: true, // true对url进行编码

                altRows: false, // 是否隔行显示不同背景颜色
                //rownumbers: true, // 显示行序号
                //rownumWidth: 40, // 行序号列宽
                viewrecords: true, // 显示总记录数
                pagerpos: 'center', // 指定分页栏的位置
                //toolbar: [true,'both'], // 数组中有两个值，第一个为是否启用，第二个指定工具栏位置，如：[true,”both”] 。工具栏位置可选值：“top”,”bottom”, “both”

                hidegrid: false, // false禁用控制表格显示、隐藏的按钮
                //hiddengrid: true, // ture表格不显示，只显示表格的标题。只有当点击显示表格的那个按钮时才会去初始化表格数据
                //toppager: true, // true在顶部显示导航条
                //footerrow: true, // true在翻页栏之上增加一行
                //userDataOnFooter : true,
                //altRows : true,
                sortable: true, // 列重排（鼠标拖动）
                //scroll: 1, // 虚拟滚动条，滚动自动加载

                multiSort: true, // 多级排序
                multiselect: true, // 是否可以多选
                multiboxonly: true, // 只有选择checkbox才会起作用。只有当multiselect=true时起作用
                //multikey: "ctrlKey", // 定义使用那个key来做多选（必须按下此键才能选择）。只有在multiselect设置为ture时起作用。shiftKey，altKey，ctrlKey
                //multiselectWidth: 40, // multiselect为true时设置multiselect列宽度


                // event
                loadComplete: function (xhr) {
                    // 表格加载完成事件
                    if (xhr && !xhr.ok) {
                        showErr(xhr.message);
                    }
                    else {
                        jQuery(grid_selector).jqGrid("setSelection", 1, true); // 选中第一行，并触发onSelectRow事件
                        var table = this;
                        setTimeout(function () {
                            styleCheckbox(table);
                            updateActionIcons(table);
                            updatePagerIcons(table);
                            enableTooltips(table);
                        }, 0);
                    }
                },
                loadError: function (xhr, status, error) {
                    // 请求失败事件
                    //alert(isJsonObj(xhr) ? JSON.stringify(xhr) : xhr);
                    var err = "错误：连接服务器失败！" + status + " - " + error
                    showErr(err);
                },
                afterSubmit: function (a, b, c, d, e, f) {
                    alert(isJsonObj(a) ? JSON.stringify(a) : a);
                    alert(isJsonObj(b) ? JSON.stringify(b) : b);
                    alert(isJsonObj(c) ? JSON.stringify(c) : c);
                    alert(isJsonObj(d) ? JSON.stringify(d) : d);
                    alert(isJsonObj(e) ? JSON.stringify(e) : e);
                    alert(isJsonObj(f) ? JSON.stringify(f) : f);
                    alert("afterSubmit");
                    //alert(isJsonObj(data) ? JSON.stringify(data) : data);
                },
                onSelectRow: function (rowid) {
                    // 行选中事件
                    //-----------------------------------------------
                    //var selrow = jQuery(grid_selector).jqGrid('getGridParam', 'selrow'); // 当前选中的行
                    if (rowid && rowid !== lastSel) {
                        jQuery(grid_selector).restoreRow(lastSel);
                        lastSel = rowid;
                    }
                    //jQuery(grid_selector).editRow(rowid, true);
                },
                ondblClickRow: function (rowid, iRow, iCol, e) {
                    // 行双击事件
                    //-----------------------------------------------
                    //  rowid   行ID
                    //  iRow    行索引（勿与rowid混淆）；
                    //  iCol    列索引；
                    //  e       事件对象
                    //===============================================
                    //alert("ondblClickRow：row " + iRow + "，col " + iCol);
                },
                // 单元格编辑事件：
                beforeSaveCell: function (rowid, cellname, value, iRow, iCol) {
                    // 在单元格内容保存前触发，可以在这个事件里面存储发往服务器的内容
                },
                beforeSubmitCell: function (rowid, cellname, value, iRow, iCol) {
                    // 保存单元格，数据发到服务器之前触发，此方法可以返回json对象附加额外的数据（cellsubmit配置为remote是有效）
                },
                afterSubmitCell: function (serverresponse, rowid, cellname, value, iRow, iCol) {
                    // 保存单元格，服务器返回信息之后触发，事件可以返回错误信息弹出显示错误的对话框（cellsubmit配置为remote是有效）
                },
                afterSaveCell: function (rowid, cellname, value, iRow, iCol) {
                    // 单元格成功保存后触发事件
                },
                errorCell: function (serverresponse, status) {
                    // 当服务器返回非200状态出错时触发 (如403, 404, 500状态等)
                },


                /*
                // 分组
                grouping: true,
                groupingView: {
                    groupField: ['name'],
                    groupColumnShow: [true], // 分组列显示
                    groupOrder: ['desc'], // 分组列排序
                    groupSummary: [true], // 分组汇总
                    showSummaryOnHide: true, // 折叠时显示汇总行
                    groupDataSorted: true,
                    groupText: ['<b>{0} - {1} 项</b>'], // 分组表头
                    groupCollapse: true, // 分组折叠
                    plusicon: 'fa fa-chevron-down bigger-110',
                    minusicon: 'fa fa-chevron-up bigger-110'
                },
                */
            });
            $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
            
            jQuery(grid_selector).jqGrid('bindKeys', { "onEnter": function (rowid) { alert("你enter了一行， id为:" + rowid); } });

            //jQuery(grid_selector).jqGrid('sortableRows'); // 行重排（鼠标拖动）

            jQuery(grid_selector).jqGrid('gridResize', { minWidth: 350, maxWidth: 800, minHeight: 200, maxHeight: 350 }); // 改变表格大小（鼠标拖动）

            //jQuery(grid_selector).jqGrid('editRow', rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc);


            // 搜索工具栏（本地搜索）
            //jQuery(grid_selector).jqGrid('filterToolbar', { defaultSearch: true, stringResult: true, searchOnEnter: false });
            //jQuery(grid_selector).filterToolbar({});


            //switch element when editing inline
            function aceSwitch(cellvalue, options, cell) {
                setTimeout(function () {
                    $(cell).find('input[type=checkbox]')
                        .addClass('ace ace-switch ace-switch-5')
                        .after('<span class="lbl"></span>');
                }, 0);
            }
            //enable datepicker
            function pickDate(cellvalue, options, cell) {
                setTimeout(function () {
                    $(cell).find('input[type=text]')
                        .datepicker({ format: 'yyyy-mm-dd', autoclose: true });
                }, 0);
            }

            //navButtons
            jQuery(grid_selector).jqGrid('navGrid', pager_selector,
                { 	//navbar options
                    edit: true,
                    editicon: 'ace-icon fa fa-pencil blue',
                    add: true,
                    addicon: 'ace-icon fa fa-plus-circle purple',
                    del: true,
                    delicon: 'ace-icon fa fa-trash-o red',
                    search: true,
                    searchicon: 'ace-icon fa fa-search orange',
                    refresh: true,
                    refreshicon: 'ace-icon fa fa-refresh green',
                    view: true,
                    viewicon: 'ace-icon fa fa-search-plus grey',
                },
                {
                    //edit record form
                    jqModal: true, // true使用jqModal插件创建对话框
                    modal: false, // true对话框为模态（显示遮盖层，lightbox效果）。jqModal=true && modal=false时点击空白处将自动关闭窗口，其他组合都无法实现此效果
                    viewPagerButtons: false, // 是否显示上一条，下一条（分页按钮）在表单中
                    closeAfterAdd: true, // 在添加模式下，保存添加的记录后关闭对话框	false
                    //clearAfterAdd:true, // 在添加模式下，保存添加的记录后清空输入的数据
                    closeAfterEdit: true, // 保存记录后关闭对话框
                    //reloadAfterSubmit: true, // 成功保存记录后重新加载grid数据
                    //checkOnUpdate: true, // 关闭窗口时，如果数据被修改，提示用户保存
                    closeOnEscape: true, // 按下ESC键关闭对话框窗口	
                    //navkeys:[true,38,40], // 添加键盘导航，允许按下配置的键切换到上/下一条记录
                    //width: 700,
                    zIndex: 10000,
                    recreateForm: true,
                    beforeShowForm: beforeEditCallback,
                    afterShowForm: function (formid) {
                        // 在表单显示后触发
                    },
                    afterComplete: function (response, postdata, formid) {
                        // 当所有动作和事件执行完毕，数据行已经添加或者更新到grid后触发
                        // response ：服务器返回的数据（ajax对象，注意不是ajaxobj.responseText）
                        // postdata ：提交到服务器的数据，JSON键值对对象
                        // formid ： jQuery 包转好的对象，通过formid[0].id获取表单id值
                    },
                    beforeSubmit: function (postdata, formid) {
                        // 在提交数据到服务器前触发
                        //方法需要返回[success,message]格式的数组信息
                        //success ：boolean值，为true指示后续的操作继续，否则停止并显示错误信息（message）提示用户。
                        //message ：错误时显示的提示信息

                        return [true,'']; // 

                        bootbox.confirm({
                            size: "small",
                            message: "确定保存?",
                            buttons: {
                                confirm: {
                                    label: '是',
                                    className: 'btn-success'
                                },
                                cancel: {
                                    label: '否',
                                    className: 'btn-danger'
                                }
                            },
                            callback: function (result) {
                                return [result, ""];
                            }
                        });
                    },
                    afterSubmit: afterEditCallback,
                    errorTextFormat: function (xhr) {
                        // 请求失败事件
                        // 此方法需要返回显示给用户的信息（string类型）
                        var err = "错误：连接服务器失败！" + xhr.status + " - " + xhr.statusText
                        //showErr(err);
                        return err;
                    },
                    onClose: function () {
                        // 表单对话框关闭前触发，可以返回true或者false。返回true或者未返回值都会关闭表单对话框，false则不关闭表单对话框。
                        return true;
                    },
                },
                {
                    //new record form
                    //width: 700,
                    closeAfterAdd: true,
                    recreateForm: true,
                    viewPagerButtons: false,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                        .wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //delete record form
                    recreateForm: true,
                    beforeShowForm: beforeDeleteCallback,
                    afterSubmit: afterDeleteCallback,
                    onClick: function (e) {
                    },
                    afterSubmit: function (response, postdata) {
                        // 提交数据从服务器返回后触发。主要用于显示服务器状态信息（例如，数据成功保存或者被服务器端取消保存的原因）
                        // 参数同afterComplete
                        // 此方法需要返回 [success, message, new_id] 格式的数据
                        // success ：为boolean值，如果为true处理继续进行（message会被忽略），如果为false，将会弹出一个对话框显示错误信息（message的值）并停止其他处理
                        // message：错误信息
                        // new_id ：在添加模式时可用于设置新数据行的id，所以添加时服务器需要同时返回保存到数据库的行ID

                        var new_id = 0;
                        if (response.readyState == 4 && response.status == 200) {
                            if (response.responseJSON.ok) {
                                showInfo("删除成功！" + response.responseJSON.message);
                            }
                            return [response.responseJSON.ok, "错误：" + response.responseJSON.message, new_id];
                        }
                        else {
                            return [false, "错误：连接服务器失败。status[" + response.status + "]，err[" + response.statusText + "]"];
                        }
                    },
                    errorTextFormat: function (xhr) {
                        // 请求失败事件
                        // 此方法需要返回显示给用户的信息（string类型）
                        var err = "错误：连接服务器失败！" + xhr.status + " - " + xhr.statusText
                        //showErr(err);
                        return err;
                    },
                },
                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        style_search_form(form);
                    },
                    afterRedraw: function () {
                        style_search_filters($(this));
                    }
                    ,
                    multipleSearch: true,
                    /**
                    multipleGroup:true,
                    showQuery: true
                    */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    }
                }
            )
            //end jQuery(grid_selector)

            function style_edit_form(form) {
                //enable datepicker on "timecreated" field and switches for "active" field
                form.find('input[name=timecreated]').datepicker({ format: 'yyyy-mm-dd', autoclose: true })
                form.find('input[name=active]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
                //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
                //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


                //update buttons classes
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
                buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

                buttons = form.next().find('.navButton a');
                buttons.find('.ui-icon').hide();
                buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
                buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
            }

            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
                buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
            }

            function style_search_filters(form) {
                form.find('.delete-rule').val('X');
                form.find('.add-rule').addClass('btn btn-xs btn-primary');
                form.find('.add-group').addClass('btn btn-xs btn-success');
                form.find('.delete-group').addClass('btn btn-xs btn-danger');
            }

            function style_search_form(form) {
                var dialog = form.closest('.ui-jqdialog');
                var buttons = dialog.find('.EditTable')
                buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
                buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
                buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
            }

        
            function beforeEditCallback(e) {
                // 在表单显示前触发
                //jQuery(grid_selector).jqGrid('setColProp', 'Name', { editrules: { required: false } });
                //jQuery('#tr_description', e).hide(); // 隐藏description属性
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_edit_form(form);
            }
            function afterEditCallback(response, postdata) {
                // 提交数据从服务器返回后触发。主要用于显示服务器状态信息（例如，数据成功保存或者被服务器端取消保存的原因）
                // 参数说明：
                //     response ：服务器返回的数据（ajax对象，注意不是ajaxobj.responseText）
                //     postdata ：提交到服务器的数据，JSON键值对对象
                //     formid ： jQuery 包转好的对象，通过formid[0].id获取表单id值
                // 返回值说明：
                //     此方法需要返回 [success, message, new_id] 格式的数据
                //     success ：为boolean值，如果为true处理继续进行（message会被忽略），如果为false，将会弹出一个对话框显示错误信息（message的值）并停止其他处理
                //     message：错误信息
                //     new_id ：在添加模式时可用于设置新数据行的id，所以添加时服务器需要同时返回保存到数据库的行ID

                var new_id = 0;

                if (response.readyState == 4 && response.status == 200) {
                    if (response.responseJSON.ok) {
                        showInfo("保存成功！" + response.responseJSON.message);
                    }
                    return [response.responseJSON.ok, "错误：" + response.responseJSON.message, new_id];
                }
                else {
                    return [false, "错误：连接服务器失败。status[" + response.status + "]，err[" + response.statusText + "]"];
                }
            }

            function beforeDeleteCallback(e) {
                // 在删除行前触发
                var form = $(e[0]);
                if (form.data('styled')) return false;

                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_delete_form(form);

                form.data('styled', true);
            }
            function afterDeleteCallback(response, postdata) {
                // 提交数据从服务器返回后触发。主要用于显示服务器状态信息（例如，数据成功保存或者被服务器端取消保存的原因）
                // 参数说明：
                //     response ：服务器返回的数据（ajax对象，注意不是ajaxobj.responseText）
                //     postdata ：提交到服务器的数据，JSON键值对对象
                //     formid ： jQuery 包转好的对象，通过formid[0].id获取表单id值
                // 返回值说明：
                //     此方法需要返回 [success, message, new_id] 格式的数据
                //     success ：为boolean值，如果为true处理继续进行（message会被忽略），如果为false，将会弹出一个对话框显示错误信息（message的值）并停止其他处理
                //     message：错误信息
                //     new_id ：在添加模式时可用于设置新数据行的id，所以添加时服务器需要同时返回保存到数据库的行ID

                var new_id = 0;
                if (response.readyState == 4 && response.status == 200) {
                    if (response.responseJSON.ok) {
                        showInfo("删除成功！" + response.responseJSON.message);
                    }
                    return [response.responseJSON.ok, "错误：" + response.responseJSON.message, new_id];
                }
                else {
                    return [false, "错误：连接服务器失败。status[" + response.status + "]，err[" + response.statusText + "]"];
                }
            }

            //it causes some flicker when reloading or navigating grid
            //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
            //or go back to default browser checkbox styles for the grid
            function styleCheckbox(table) {
                /**
                    $(table).find('input:checkbox').addClass('ace')
                    .wrap('<label />')
                    .after('<span class="lbl align-top" />')
            
            
                    $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                    .find('input.cbox[type=checkbox]').addClass('ace')
                    .wrap('<label />').after('<span class="lbl align-top" />');
                */
            }


            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons(table) {
                /**
                var replacement = 
                {
                    'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
                    'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
                    'ui-icon-disk' : 'ace-icon fa fa-check green',
                    'ui-icon-cancel' : 'ace-icon fa fa-times red'
                };
                $(table).find('.ui-pg-div span.ui-icon').each(function(){
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                    if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                })
                */
            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                var replacement =
                {
                    'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                    'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                    'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                    'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
                };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                    if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
                })
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({ container: 'body' });
                $(table).find('.ui-pg-div').tooltip({ container: 'body' });
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

            $(document).one('ajaxloadstart.page', function (e) {
                $.jgrid.gridDestroy(grid_selector);
                $('.ui-jqdialog').remove();
            });
        });
    </script>
</asp:Content>
